<template>
  <view class="list-view">
    <!-- 消息、关注、评论 -->
    <view class="msg-att-comt-box">
      <view class="mac-item" @click="showLikeMsg">
        <image class="mac-item-img" src="../../static/img/like.png"></image>
        <text class="mac-item-text">点赞和收藏</text>
      </view>
      <view class="mac-item" @click="showAttMsg">
        <image class="mac-item-img" src="../../static/img/attention.png"></image>
        <text class="mac-item-text">新增关注</text>
      </view>
      <view class="mac-item" @click="showCmtMsg">
        <image class="mac-item-img" src="../../static/img/msg.png"></image>
        <text class="mac-item-text">评论和@</text>
      </view>
    </view>
    <!-- 消息列表 -->
    <scroll-view scroll-y="true" lower-threshold="50" @scrolltolower="getMoreChatList">
      <view class="msg-item" v-for="(item,index) in data.chatList" @click="showChat(index)">
        <image class="msg-avatar" :src="item.avatar"></image>
        <view class="msg-box">
          <text class="msg-name">{{item.userName}}</text>
          <text class="msg-content">{{item.lastMsg}}</text>
        </view>
        <text class="msg-time">{{item.time}}</text>
        <view class="msg-count" v-if="item.count > 0">{{item.count}}</view>
      </view>
    </scroll-view>
    
  </view>
</template>

<script setup>
import { reactive, ref,toRefs } from 'vue';
import { onShow,onLoad,onUnload,onHide } from '@dcloudio/uni-app'
import helper from '../../common/helper.js'

const data = reactive({
  chatList:[],
  total:0,
  pageNum:0,
  pageSize: 10,
});

onShow(()=>{
  data.pageNum = 0
  data.chatList = []
  getChatList()
})

function getChatList(){
  uni.request({
    url: helper.webUrl + "/chat/getChatList",
    method:'GET',
    header:{
      'Content-Type': 'application/x-www-form-urlencoded',
      'token': helper.getToken()
    },
    data: {
      pageNum: data.pageNum,
      pageSize: data.pageSize
    },
    success: (res) => {
      console.log(res.data);
      if(res.data.code == 200){
        data.total = res.data.data.total
        data.pageNum++
        let list = res.data.data.record
        for(let i = 0; i < list.length; i++){
          list[i].time = helper.getDateTime(list[i].time)
          data.chatList.push(list[i])
        }        
      }
    },
    fail: (err) => {
      console.error('请求失败:', err);
    }
  })
}

function getMoreChatList(){
  if(data.total <= data.pageNum*data.pageSize){
    return
  }
  getChatList()
}
     
// 查看点赞信息
function showLikeMsg(){
  console.log("查看点赞信息")
  uni.navigateTo({
    url:"/subpages/likeStarMsg/likeStarMsg"
  })
}
// 查看关注信息
function showAttMsg(){
  console.log("查看关注信息")
  uni.navigateTo({
    url:"/subpages/attMsg/attMsg"
  })
}
// 查看评论信息
function showCmtMsg(){
  console.log("查看评论信息")
  uni.navigateTo({
    url:"/subpages/commentMsg/commentMsg"
  })
}
// 查看聊天界面
function showChat(index){
  console.log("查看聊天界面")
  uni.navigateTo({
    url:`/subpages/chat/chat?chatUserId=${data.chatList[index].userId}&&chatUserAvatar=${data.chatList[index].avatar}`
  })
}
</script>

<style>
.msg-att-comt-box{
  display: flex;
  width: 100vw;
  height: 25vh;
  border: 1px solid #c5c5c5;
}
.mac-item{
  width:30%;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.mac-item-img{
  display: flex;
  width: 80px;
  height: 80px;
}
.mac-item-text{
  text-align: center;
  font-size: 18px;
}
.msg-item{
  display: flex;
  height: 10vh;
  align-items: center;
  padding: 10px;
}
.msg-box{
  display: flex;
  flex-direction: column;
  margin-left: 10px;
}
.msg-name{
  font-size: 20px;
  font-weight: bold;
}
.msg-content{
  font-size: 16px;
  color: #5f5f5f;
}
.msg-time{
  color: #5f5f5f;
  margin-left: auto;
  margin-bottom: auto;
}
.msg-avatar{
  width: 60px;
  height: 60px;
  border-radius: 50%;
}
.msg-count{
  padding: 5px;
  background-color: red;
  color: #fff;
  border-radius: 50%;
  font-size: 10px;
}
</style>
